<template>
  <div class="title-box" :style="[
            {'textAlign':txtPosition},
            {'fontStyle':txtStyle!='bold'?txtStyle:''},
            {'fontWeight':txtStyle=='bold'?txtStyle:''},
            {'fontSize':fontSize+'px'},
            {'marginTop':mTOP+'px'},
            {'backgroundColor':bgc},
            {'backgroundImage':'url('+bgImage+')','backgroundSize': bgSize},
            {'width':'100%'},
            {'height':'100%'}
         ]">
    {{titleTxt}}
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'activity_my',
  cname: '我的奖品',
  icon: 'iconbiaoti',
  configName: 'c_home_title',

  dataShow: 1, // 1展示，0隐藏
  dataSort: 4, // 排序，小的在前
  dataDelete: 1, // 0不可删除，1可删除
  dataLimit: 1, // 0无限制，
  dataLimitRange: 0,  // 限制范围:0多个页面，1 1个页面
  dataTag: [1, 2],  // 组件标签-筛选

  dataExtendOne: 0, // 两个扩展，暂时无用
  dataExtendTwo: 0,

  type: 1, // 0 基础组件 1 活动组件
  defaultName: 'activityMyAward', // 外面匹配名称
  props: {
    index: {
      type: null
    },
    num: {
      type: null
    }
  },
  position: {
    top: 0,
    left: 0,
    width: 52,
    height: 26.5,
    zindex: 1,
  },
  computed: {
    ...mapState('admin/mobildConfig', ['defaultArray'])
  },
  watch: {
    pageData: {
      handler (nVal, oVal) {
        this.setConfig(nVal)
      },
      deep: true
    },
    num: {
      handler (nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[nVal]
        this.setConfig(data)
      },
      deep: true
    },
    'defaultArray': {
      handler (nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[this.num]
        this.setConfig(data);
      },
      deep: true
    }
  },
  data () {
    return {
      defaultConfig: {
        name: 'activityMyAward',
        timestamp: this.num,
        titleConfig: {
          title: '标题',
          value: '',
          max: 10
        },
        linkConfig: {
          title: '链接',
          value: '',
          max: 100
        },
        position: {
          top: 0,
          left: 0,
          width: 52,
          height: 26.5,
          zindex: 1,
        },
        titleColor: {
          title: '背景颜色',
          default: [
            {
              item: 'rgba(255,255,255,1)'
            }
          ],
          color: [
            {
              item: 'rgba(255,255,255,1)'
            }
          ]
        },
        textPosition: {
          title: '文本位置',
          type: 0,
          list: [
            {
              val: '居左',
              style: 'left',
              icon: 'icondoc_left'
            },
            {
              val: '居中',
              style: 'center',
              icon: 'icondoc_center'
            },
            {
              val: '居右',
              style: 'right',
              icon: 'icondoc_right'
            }
          ]
        },
        textStyle: {
          title: '文本样式',
          type: 0,
          list: [
            {
              val: '正常',
              style: 'normal',
              icon: 'icondoc_general'
            },
            {
              val: '斜体',
              style: 'italic',
              icon: 'icondoc_skew'
            },
            {
              val: '加粗',
              style: 'bold',
              icon: 'icondoc_bold'
            }
          ]
        },
        fontSize: {
          title: '文本大小',
          val: 12,
          min: 12
        },
        mbConfig: {
          title: '页面间距',
          val: 0,
          min: 0
        },
        layoutConfig: {
          widthTitle: '宽度',
          width: 52,
          heightTitle: '高度',
          height: 26.5,
          topTitle: '居上',
          top: 0,
          leftTitle: '居左',
          left: 0,
        },
        logoConfig: {
          title: '背景图片',
          url: 'https://img.alicdn.com/imgextra/i4/289589474/TB2omoHi46I8KJjy0FgXXXXzVXa-289589474.png'
        }
      },
      bgSize: '',
      bgImage: '',
      titleTxt: '',
      link: '',
      txtPosition: '',
      txtStyle: '',
      fontSize: 0,
      mTOP: 0,
      bgc: 'rgba(51,51,51,1)',
      pageData: {}
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.pageData = this.$store.state.admin.mobildConfig.defaultArray[this.num]
      this.setConfig(this.pageData)
    })
  },
  methods: {
    setConfig (data) {
      console.log('data', JSON.stringify(data))
      this.titleTxt = data.titleConfig.value
      this.link = data.linkConfig.value
      this.txtPosition = data.textPosition.list[data.textPosition.type].style
      this.txtStyle = data.textStyle.list[data.textStyle.type].style
      this.fontSize = data.fontSize.val
      this.mTOP = data.mbConfig.val;
      this.bgc = data.titleColor.color[0].item
      this.bgImage = data.logoConfig.url
      this.bgSize = '100% 100%'
      // this.imgStyle = data.imgConfig.type
      // this.imgSrc = data.swiperConfig.list[0].img
    }
  }
}
</script>

<style scoped lang="stylus">
.title-box {
  color: #282828;
}
</style>
